<template>
	<view class="container">
		<view class="content">
			<view class="left">
				修改头像
			</view>
			<view class="right" @tap.stop="uploadImg()">
				<image :src="userInfo.headImg" mode="scaleToFill"></image>
			</view>
			<view class="iconfont icon-youjiantou"></view>
		</view>
		<view class="content">
			<view class="left">
				点击修改昵称:
			</view>
			<view class="right" v-if="!inputShow" @click="changeShow()">
				{{userInfo.nickName}}
			</view>
			<view class="right" v-else>
				<input type="text" v-model="userInfo.nickName" @blur="changeShow(0)" />
			</view>
			<view class="iconfont icon-youjiantou"></view>
		</view>
		<view class="content">
			<view class="left">
				点击修改性别
			</view>
			<view class="right">
				<picker @change="bindPickerChange" :value="userInfo.gender" :range="array">
					<view class="uni-input">{{array[userInfo.gender]}}</view>
				</picker>
			</view>
			<view class="iconfont icon-youjiantou"></view>
		</view>
		<view class="content" @click="navTo">
			<view class="left">
				修改密码
			</view>
			<view class="right">
				
			</view>
			<view class="iconfont icon-youjiantou"></view>
		</view>
	</view>
</template>

<script>
	const userinfo = uni.getStorageSync('userInfos');
	import api from '@/comon/api.js'
	export default {
		data() {
			return {
				userInfo: {
					headImg: '',
					nickName: '',
					gender : 0
				},
				inputShow: false,
				array: ['保密', '男', '女'],
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				if (userinfo) {
					this.userInfo = userinfo;
				} else {
					uni.navigateBack({})
				}
			},
			// 修改头像
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					async success(res) {
						let filePath = res.tempFilePaths[0]
						//进行上传操作
						let upImage = await api.uniCloudUpImage(filePath);
						that.userInfo.headImg = upImage;
						that.updataUser();
					}
				});
				
			},
			// 修改昵称
			async changeShow(e) {
				this.inputShow = !this.inputShow;
				if(e == 0){
					this.updataUser()
				}
			},
			// 修改性别
			async bindPickerChange(e) {
				this.userInfo.gender = e.detail.value;
				this.updataUser();
			},
			async updataUser(){
				this.userInfo.user_type = 3
				let res = await api.uniCloudApi(api.publicFun.user,this.userInfo);
				if(res.updated > 0){
					uni.showToast({
						icon:'none',
						title:'信息更新成功'
					})
					this.userInfo.user_type = 2
					let result = await api.uniCloudApi(api.publicFun.user,this.userInfo);
					if(result.length > 0){
						uni.setStorageSync('userInfos',result[0])
					}
				}
			},
			navTo(){
				uni.navigateTo({
					url:'revisePassword'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	
	.container {
		background-color: #f5f5f5;
	}
	
	.content {
		width: calc(100% - 50rpx);
		height: 80rpx;
		display: flex;
		background-color: #fff;
		height: 100rpx;
		padding: 0 25rpx;
		border-bottom: 1px solid #F1F1F1;
	
		.left {
			line-height: 100rpx;
			width: 50%;
		}
	
		.right {
			width: 45%;
			text-align: right;
			line-height: 100rpx;
	
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
				margin-top: 5rpx;
			}
	
			input {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #FFFFFF;
			}
	
			.uni-input {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0;
			}
		}
	
		.icon-youjiantou {
			width: 5%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			color: #dddddd;
		}
	}
</style>
